<template>
	<view class="pages">
		<headerMain
		@goBack="goBack" :backColor="'black'"
		:headerTitle="'商品详情'" :titleColor="'#000'"
		:heightTop="heightTop"
		/>
		
		<view class="content">
			<view class="main">
				<swiper class="swiperBox" circular autoplay previous-margin="60rpx" next-margin="60rpx" :current="current" @change="changeSwiper">
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<!-- 当前所在滑块的 index == index 放大 -->
						<view :class=" current === index ? 'slide-image active' : 'slide-image quiet'">
							<image class="img" :src="item.url">
							</image>
							<view class="contentBox">
								<view class="titleBox"> 
									<view class="title"> 
										{{item.title}}
									</view>
									<view class="tips">
										热销单品
									</view>
								</view>
								<view class="innnerbox">
									<view class="inner1">
										<view class="inner2" style="width: 70%;height: 100%;background-color: #6ac4b0;border-radius: 15rpx;">
	 
										</view>
									</view>
									<view class="">
										已抢{{item.count}}份
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="infoBox">
				<view class="nameBox">
					<view class="tipsBox">
						<text>自营</text>
						拉夏贝尔真维斯针织衫女夏季洋气设计感时尚潮流冰丝V领上衣女粉色均码
					</view>
				</view>
				<view class="dataBox">
					<view class="dataBox-icon">
						<img src="@/static/type/start.png" alt="" />
						<img src="@/static/type/start.png" alt="" />
						<img src="@/static/type/start.png" alt="" />
					</view>
					<view class="dataBox-fraction">3分</view>
					<view class="dataBox-label" @tap.stop="goToComment()">成交量 145单 145评论
						<img src="@/static/type/next.png" alt="" />
					</view>
				</view>
				<view class="timeBox">
					营业时间 09:00-19:00
				</view>
				<view class="typeBox">
					<text class="orange">女装</text>
					<text class="green">臻选</text>
					<text class="red">热款</text>
				</view>
				<view class="addressBox">
					<view class="left">
						<view class="addr">广东省深圳市南山区华侨城欢乐谷北华侨城天鹅堡</view>
						<view class="km">距您9.99km</view>
					</view>
					<view class="right">
						<view class="item" @tap.stop="getAddr()">
							<img src="@/static/type/addr.png" alt="" />
							<view class="txt">去这里</view>
						</view>
						<view class="item" @tap.stop="getCall()">
							<img src="@/static/type/phone.png" alt="" />
							<view class="txt">电话</view>
						</view>
					</view>
				</view>
			</view>
		
		
			<!-- 店铺服务 -->
			<view class="servicesBox">
				<view class="servicesBox-title">
					店铺服务
				</view>
				<view class="servicesBox-box">
					<view class="servicesBox-list" v-for="(item,index) in 10" :key="index">
						<img src="https://img14.360buyimg.com/n1/s450x450_jfs/t1/226875/3/22653/29461/668f53f0F2f50d2c1/f267d77b39cfc882.jpg" alt="" />
						<view class="label">MONCLER盟可睐</view>
						<view class="price">￥16800<view class="in">16000</view></view>
					</view>
				</view>
			</view>
			
			<!-- 用户评价 -->
			<view class="servicesBox">
				<view class="servicesBox-title">
					用户评价
				</view>
				<view class="servicesBox-evaluate">
					<view class="servicesBox-evaluateList" v-for="(item,index) in 2" :key="index">
						<view class="avatar">
							<img src="@/static/public/wechat.png" alt="" />
						</view>
						<view class="wordBox">
							<view class="top">
								<view class="name">胖胖鱼</view>
								<view class="time">2024-12-24</view>
							</view>
							<view class="fraction">
								<img src="@/static/type/start.png" alt="" />
								<img src="@/static/type/start.png" alt="" />
								<img src="@/static/type/start.png" alt="" />
								<view class="fen">3分</view>
							</view>
							<view class="title">用户暂未评价</view>
							<view class="imageBox" v-if="index == 0">
								<view class="imageBox-box" v-for="(itemKey,indexKey) in 2" :key="indexKey">
									<img src="https://img14.360buyimg.com/n1/s450x450_jfs/t1/226875/3/22653/29461/668f53f0F2f50d2c1/f267d77b39cfc882.jpg" alt="" />
								</view>
							</view>
							<view class="imageBox" v-else>
								<view class="imageBox-box" v-for="(itemKey,indexKey) in 4" :key="indexKey">
									<img src="https://img14.360buyimg.com/n1/s450x450_jfs/t1/226875/3/22653/29461/668f53f0F2f50d2c1/f267d77b39cfc882.jpg" alt="" />
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="servicesBox-nextTitle" @tap.stop="goToComment()">
					点击查看更多
					<img src="@/static/type/next.png" alt="" />
				</view>
			</view> 
				
				
			<!-- 店铺详情 -->
			<view class="servicesBox">
				<view class="servicesBox-title">
					店铺详情
				</view>
				<view class="servicesBox-details">
					<img src="https://img14.360buyimg.com/n1/s450x450_jfs/t1/226875/3/22653/29461/668f53f0F2f50d2c1/f267d77b39cfc882.jpg" alt="" />
					<img src="https://img14.360buyimg.com/n1/s450x450_jfs/t1/226875/3/22653/29461/668f53f0F2f50d2c1/f267d77b39cfc882.jpg" alt="" />
					<img src="https://img14.360buyimg.com/n1/s450x450_jfs/t1/226875/3/22653/29461/668f53f0F2f50d2c1/f267d77b39cfc882.jpg" alt="" />
				</view>
			</view>
				
		</view>
		
	</view>
</template>

<script>
	export default {
		components: {
		}, 
		data() {
			return { 
				heightTop: 0,
				current: 0,
				bannerList : [{
							url: 'https://img1.360buyimg.com/n6/jfs/t1/109738/7/40737/75073/649ea86bFa8def1b4/b0517e212c2d576c.jpg',
							count: 5000,
							title: '拉夏贝尔品牌 折扣盛世来袭'
						},
						{
							url: 'https://img1.360buyimg.com/n6/jfs/t1/109738/7/40737/75073/649ea86bFa8def1b4/b0517e212c2d576c.jpg',
							count: 5001,
							title: '拉夏贝尔品牌 折扣盛世来袭'
						},
						{
							url: 'https://img1.360buyimg.com/n6/jfs/t1/109738/7/40737/75073/649ea86bFa8def1b4/b0517e212c2d576c.jpg',
							count: 5002,
							title: '拉夏贝尔品牌 折扣盛世来袭'
						}
					]
			}
		},
		onPageScroll(e) {
			this.heightTop = e.scrollTop;
		},
		onLoad() {
		},
		onShow() {
			// this.init();
		},
		methods: {
			init(){
			},
			
			goToComment(){
				uni.navigateTo({
					url: '/pages/product/comment'
				})
			},
			
			// 地址（不支持app H5）
			getAddr(){
				uni.chooseAddress({
				  success(res) {
				    console.log(res.userName)
				    console.log(res.postalCode)
				    console.log(res.provinceName)
				    console.log(res.cityName)
				    console.log(res.countyName)
				    console.log(res.detailInfo)
				    console.log(res.nationalCode)
				    console.log(res.telNumber)
				  }
				})
			},
			
			// 拨打电话
			getCall(){
				uni.makePhoneCall({
					phoneNumber: '114' //仅为示例
				});
			},
			
			changeSwiper(e) {
				this.current = e.detail.current;
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.pages{
		height: auto;
	}
	.main {
		.swiperBox {
			box-sizing: border-box;
			width: 100%;
			height: 750rpx;
	 
			// margin: 50% auto;
			background-color: #e9f4f2;
			color: #fff;
			border-radius: 10rpx;
	 
			.slide-image {
				// width: 600rpx;
				width: 100%;
				height: 635rpx;
				background: #fff;
				border-radius: 10rpx;
				
				.img{
					width: 100%;
					height: 100%;
				}
				.contentBox{
					padding: 0 20rpx;
					.titleBox{
						display: flex; color: #000;font-weight: 600;height: 60rpx;align-items: center;justify-content: space-between;
						.tips{
							background: orange;
							border-radius: 10rpx;
							font-size: 24rpx;
							font-weight: 400;
							padding: 4rpx 8rpx;
						}
					}
				}
				.innnerbox {
					margin-top: 10rpx;
					height: 20rpx;
					align-items: center;
					display: flex;
					color: #64c1ad;
					font-size: 24rpx;
					justify-content: space-between;
	 
					.inner1 {
						width: 70%;
						background-color:#e7f6f3;
						height: 100%;
						border-radius: 15rpx;
					}
				}
			}
	 
			.active {
				// 中间放大动画
				transform: none;
				transition: all 0.2s ease-in 0s;
			}
	 
			.quiet {
				// 两边缩小动画
				transform: scale(0.95);
				opacity: 0.4;
				transition: all 0.5s ease-in 0s;
			}
		}
	}
	
	.infoBox{
		background: #ffffff;
		padding: 10px;
		.nameBox{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;
			.tipsBox{
				font-size: 30rpx;
				font-weight: bold;
				text{
					font-size: 24rpx;
					padding: 4rpx 8rpx;
					color: #ffffff;
					background: #64c1ad;
					border-radius: 4rpx;
					margin-right: 8rpx;
				}
			}
		}
		.dataBox{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;
			margin: 10px 0;
			&-icon{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: flex-start;
				img{
					width: 40rpx;
					height: 40rpx;
					margin-right: 5rpx;
				}
			}
			&-fraction{
				font-size: 28rpx;
				color: #1afa29;
				margin: 0 10rpx;
			}
			&-label{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				font-size: 28rpx;
				color: #989999;
				img{
					width: 25rpx;
					height: 25rpx;
					margin-left: 10rpx;
				}
			}
		}
		.timeBox{
			font-size: 28rpx;
			color: #666666;
		}
		.typeBox{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;
			margin-top: 10rpx;
			text{
				font-size: 24rpx;
				padding: 4rpx 8rpx;
				margin-right: 10rpx;
			}
			.orange{
				border: 1px solid #f0ad4e;
				color: #f0ad4e;
			}
			.green{
				border: 1px solid #16baaa;
				color: #16baaa;
			}
			.red{
				border: 1px solid #dd524d;
				color: #dd524d;
			}
		}
		.addressBox{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			background: #fff0e5;
			border-radius: 10rpx;
			padding: 20rpx 10rpx;
			margin: 15rpx 0 0;
			.left{
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				width: 60%;
				.addr{
					font-size: 28rpx;
					color: #000000;
				}
				.km{
					font-size: 24rpx;
					color: #333333;
					margin-top: 10rpx;
				}
			}
			.right{
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				margin-right: 20rpx;
				.item{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-left: 15rpx;
					img{
						width: 52rpx;
						height: 52rpx;
						margin-bottom: 5rpx;
					}
					.txt{
						font-size: 26rpx;
						color: #000000;
					}
				}
			}
		}
	}
	
	.servicesBox{
		background: #ffffff;
		padding: 20rpx;
		margin: 10px 0;
		&-title{
			font-size: 30rpx;
			color: #000000;
		}
		&-box{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			margin: 20rpx 0 0;
			overflow-y: auto;
		}
		&-list{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-right: 20rpx;
			img{
				width: 240rpx;
				height: 240rpx;
				border-radius: 20rpx;
			}
			.label{
				font-size: 28rpx;
				color: #000000;
				margin: 10rpx 0;
			}
			.price{
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				color: #444444;
				.in{
					font-size: 22rpx;
					color: #999999;
					text-decoration: line-through;
					margin-left: 10rpx;
				}
			}
		}
		&-evaluate{
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			margin: 20rpx 0 0;
		}
		&-evaluateList{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;
			width: 100%;
			border-bottom: 1px solid #f6f6f6;
			margin-bottom: 20rpx;
			.avatar{
				background: #f0f0f0;
				border-radius: 50%;
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.wordBox{
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				width: calc(100% - 80rpx);
				margin-bottom: 20rpx;
				.top{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					.name{
						font-size: 26rpx;
						color: #666666;
					}
					.time{
						font-size: 26rpx;
						color: #666666;
					}
				}
				.fraction{
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					margin: 10rpx 0;
					img{
						width: 40rpx;
						height: 40rpx;
						margin-right: 5rpx;
					}
					.fen{
						font-size: 28rpx;
						color: #1afa29;
						margin: 0 10rpx;
					}	
				}
				.title{
					font-size: 26rpx;
					color: #000000;
				}
				.imageBox{
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					margin-top: 10rpx;
					width: 100%;
					&-box{
						width: 31.33%;
						height: 100%;
						margin-right: 2%;
						&:nth-last-child(1){
							margin-right: 0%;
						}
						img{
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
						}
					}
				}
			}
		}
		&-nextTitle{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #989999;
			img{
				width: 25rpx;
				height: 25rpx;
				margin-left: 10rpx;
			}
		}
		&-details{
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			margin: 20rpx 0 0;
			img{
				width: 100%;
				height: 100%;
			}
		}
	}
	
</style>